<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    body,
    html {
        background-color: #f2f0f0;
    }

    .card {
        padding: 0 0.8rem;
        border-radius: 0.5rem;
        background-color: #fff;
        margin-bottom: 2rem;

    }

    .card .item {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
    }

    .card .item .tou,
    .card .item .wei {
        width: 50%;
        text-align: right;
        font-size: 0.7rem;
    }

    .card .item .tou {
        text-align: left;
    }

    .card .item:last-child {
        border-bottom: none;
    }

    .card .item img {
        width: 0.4rem;
        height: 0.8rem;
        margin-top: 1.1rem;
        float: right;
    }

    .title {
        margin: 0.8rem 0;
        font-size: 0.8rem;
    }

    .subtitle {
        padding-bottom: 0.5rem;
        font-size: 0.7rem;
        color: #ccc;
    }

    .submit {
        margin: 2rem 0.8rem;
        text-align: center;
        line-height: 2rem;
        height: 2rem;
        background-color: #2882e1;
        color: #fff;
        font-size: 0.8rem;
        border-radius: 10rem;
    }

    .submit:active {
        background-color: #ccc;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="placeholder_div"></div>
        <div class="card">
            <div class="item">
                <div class="tou">银行卡</div>
                <input type="text" class="wei" v-model="bankAccount" disabled placeholder="请选择银行卡">
                <img src="../image/arrow_right.png" alt="" class="arrow">
            </div>
            <div class="item">
                <div class="tou">提现金额</div>
                <input type="number" class="wei" placeholder="请输入提现金额" v-model="number">
            </div>
            <div class="item">
                <div class="tou">备注</div>
                <input type="text" class="wei" placeholder="请输入备注" v-model="beizhu">
            </div>
            <div class="title">余额 ￥13.10</div>
            <div class="subtitle">注：单笔单日提现金额最多￥20000</div>
        </div>

        <div class="submit" @click="submit">提现</div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();

        get_ajax("ucenter/bank/view", {
            userId: $api.getStorage("emp").userId
        }, function (res, err) {
            // alert(JSON.stringify(res))
            if (res.code == 2000 && res.data) {
                app.name = res.data.name
                app.bankAccount = res.data.bankAccount
                app.bankName = res.data.bankName
                app.accountArea = res.data.province + ' ' + res.data.city
            } else {
                toast("服务器开小差了，请稍后再试")
            }
        })
    }
    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            name: "", // 持卡人姓名
            bankName: "", //银行名称
            accountArea: "", //所在地区
            bankAccount: "", // 银行卡
            number: "",
            beizhu: "",
        },
        methods: {
            submit() {
                if (!app.bankAccount) {
                    toast("请输入银行卡号")
                    return
                }
                if (!app.number) {
                    toast("请输入提现的金额")
                }
                let data = {
                    targetId: $api.getStorage("emp").userId,
                    targetType: 0,
                    accountType: "bank",
                    accountTargetName: app.bankName,
                    accountArea: app.accountArea,
                    accountNo: app.bankAccount,
                    accountUser: app.name,
                    money: app.number,
                    remark: app.beizhu,
                    process: 0,
                }
                console.log(JSON.stringify(data))
                get_ajax("doctor/cash/draws/save", data, function (res, err) {
                    alert(JSON.stringify(res))
                    alert(JSON.stringify(err))
                })
            }
        },
    });
</script>